<template>
  <div class="login">
    <mt-header class="d1" title="用户登录">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <router-link to="/register" slot="right">
        <mt-button>注册</mt-button>
      </router-link>
    </mt-header>
    <div class="back"></div>
    <div class="login-title">
      <span>你好,</span>
      <span>欢迎登录速回收</span>
    </div>
    <div class="login-item">
      <input
        v-model="username"
        maxlength="16"
        placeholder="请输入用户名"
        type="String"
        @blur="mov"
      />
      <img v-if="verify" src="/img/index/dui.png" />
    </div>
    <div class="login-send">
      <input
        v-model="pwd"
        class="input1"
        maxlength="16"
        placeholder="密码"
        type="number"
        @blur="move"
      />
      <img v-if="ver" src="/img/index/dui.png" />
    </div>
    <button class="login-button" @click="login">登录</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      pwd: "",
      verify: false,
      ver: false,
    };
  },
  methods: {
    mov() {
      var reg = /^\S{3,16}$/;
      if (reg.test(this.username)) {
        this.verify = true;
        return true;
      } else {
        this.verify = false;
        return false;
      }
    },
    move() {
      var reg = /^\S{5,16}$/;
      if (reg.test(this.pwd)) {
        this.ver = true;
        return true;
      } else {
        this.ver = false;
        return false;
      }
    },
    login() {
      if (this.mov() && this.move) {
        this.axios
          .post("users/login", `name=${this.username}&password=${this.pwd}`)
          .then((res) => {
            console.log(res.data.code);
            if (res.data.code == 200) {
              var uid = res.data.info.id;
              window.sessionStorage.setItem("username", this.username);
              window.sessionStorage.setItem("uid", uid);
              this.$router.push("/");
              this.$toast({
                message: "登录成功",
                position: "center",
                duration: 1000,
              });
            } else {
              this.$toast({
                message: "登录失败:用户名或密码错误",
                position: "center",
                duration: 3000,
              });
            }
          });
      }
    },
  },
};
</script>
<style>
* {
  margin: 0px;
  padding: 0px;
}
.login .d1 {
  color: black;
  font-size: 15px;
  font-weight: 300px;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
}
.login {
  height: 467px;
  /* border: black 1px solid; */
}
.back {
  height: 200px;
  background: url("/img/index/20200410103352_3408.png") no-repeat;
  border: red 1px solid;
  background-size: cover;
  margin-bottom: 10px;
}
.login-title {
  height: 50px;
  width: 313px;
  margin: 0 auto;
}
.login-title > span {
  font-size: 21px;
}
.login-item {
  width: 313px;
  height: 43px;
  margin: 0 28px;
  margin-bottom: 10px;
  position: relative;
}
.login-item img {
  position: absolute;
  top: 2px;
  right: -15px;
}
.login-send img {
  position: absolute;
  top: 2px;
  right: -15px;
}
input {
  width: 313px;
  height: 33px;
  background-color: #f5f5f5;
  border-radius: 5px;
  display: block;
  padding: 0px 0px 0px 18px;
}
.input1 {
  width: 313px;
  height: 33px;
  background-color: #f5f5f5;
}
.login-send {
  width: 313px;
  height: 43px;
  position: relative;
  margin: 0 auto;
  margin-left: 28px;
  display: inline-block;
}
.span-text {
  width: 100px;
  height: 50px;
  /* border: black 1px solid; */
  display: inline-block;
  text-align: center;
  margin-left: 30px;
  line-height: 45px;
  background-color: #999999;
  color: white;
  font-size: 15px;
  border-radius: 5px;
}
.login-button {
  margin-top: 25px;
  text-align: center;
  background-color: #f5f5f5;
  width: 325px;
  height: 50px;
  /* border: black 1px solid; */
  margin: 0 auto;
  margin-left: 28px;
  margin-top: 25px;
  border-radius: 5px;
}
</style>
